<template>
    <NormalTable
            :refresh-action="'盘存汇总查询'"
            :tableColumns="tableColumns" 
            :tableAttribute = "tableAttribute" 
            :del-menu-item-names="['导出全部']"
            :after-post="afterPost"           
            ref="childRef">
    </NormalTable>
    
    <!-- <el-button-group class="bg">
        <el-space>
            <el-button
                class="btn"
                type="primary"
                :icon="Search"
                @click="onQuery"
                >查询</el-button
            >
            <el-dropdown @command="handleCommand">
                <el-button type="primary">
                    导出 Excel<el-icon class="el-icon--right"
                        ><arrow-down
                    /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="current"
                            >当前页</el-dropdown-item
                        >
                        
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-space>
    </el-button-group>
    <div class="page">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[50, 100, 150, 200]"
            layout="sizes, prev, pager, next"
            :total="totalnum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div> -->
    <!-- <el-dialog
        v-model="dialogQueryVisible"
        title="盘存汇总查询"
        draggable
        destroy-on-close
    >
        <QueryForm
            :queryItems="queryItems"
            :tableID="tableRef!.$el.id"
            @yh-closedialog="onCloseDialog"
        ></QueryForm>
    </el-dialog> -->
</template>
<script setup lang="ts" name="InventoryGroup">
import { ref, reactive, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import {
    isEmpty,
} from 'lodash';
import type {
    InventoryGroupShowModel,
} from '@/common/types/container';
import {
    tableColumnDefault
} from '@/hooks/useTable';
import type { QueryItem, responseType, TableColumn } from '@/common/types/app';
import { pickQueryFromTable } from '@/common/tools';
import { useAppStore } from '@/store/app';
import { transFormatter } from '@/common/tools';
import NormalTable from '@/components/tables/NormalTable.vue';
// import UpdateCntr from './UpdateCntr.vue';
const { cntrDam, cyCfs } = storeToRefs(useAppStore());
const childRef = ref<InstanceType<typeof NormalTable>>()
// const tableRef = ref<TableInstance>();
const tableAttribute = ref({
    'id': 'Inventorygroup-table-cntrs',
    'row-key': "['cfs_cod', 'cntr_siz_cod', 'cntr_typ_cod']"
});
// const tableData = ref<Array<InventoryGroupShowModel>>([]);

/* const tableHeight = ref(100); */
const onFormatter = (_row: any, column: any, cellValue: any) => {
    let data: { value: string | number; label: string }[];
    if (column['property'] === 'dam_id') {
        data = cntrDam.value;
    } else if (column['property'] === 'cfs_cod') {
        data = cyCfs.value;
    } else {
        return cellValue;
    }
    return transFormatter(cellValue, data);
};
const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'cfs_cod',
        label: '站点',
        sortable: true,
        formatter: onFormatter,
        formFieldItemType: 'single',
        optionalValues: cyCfs.value,
        width: 180,
    },
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'cntr_siz_cod',
        label: '箱尺寸',
        sortable: true,
        width: 80,
    },
    {
        ...tableColumnDefault,
        order: 3,
        prop: 'cntr_typ_cod',
        label: '箱型',
        sortable: true,
        width: 80,
    },
    {
        ...tableColumnDefault,
        order: 4,
        prop: 'cntr_num',
        label: '箱量',
        noquery: true,
        width: 80,
    },

    {
        ...tableColumnDefault,
        order: 5,
        prop: 'details',
        label: '箱量信息',
        width: 700,
        noquery: true,
    },
   
]);

const afterPost = (r: responseType): void => {
    
    if (!isEmpty(r.obj)) {
        
        for (let index = 0; index < r.obj.length; index++) {
            const element = r.obj[index];
            const i = childRef.value?.tableData.findIndex((e: InventoryGroupShowModel) => {
                return (
                    e.cfs_cod === element.cfs_cod &&
                    e.cntr_siz_cod === element.cntr_siz_cod &&
                    e.cntr_typ_cod === element.cntr_typ_cod
                );
            });
            if (i && i >= 0) {
                childRef.value!.tableData[i].details =
                childRef.value!.tableData[i].details +
                    `${element['dam_id']}:  ${element['count']}  `;
                childRef.value!.tableData[i].cntr_num += parseInt(element['count']);
            } else {
                childRef.value!.tableData.push({
                    cfs_cod: element['cfs_cod'],
                    cntr_siz_cod: element['cntr_siz_cod'],
                    cntr_typ_cod: element['cntr_typ_cod'],
                    details: `${element['dam_id']}:  ${element['count']} `,
                    cntr_num: parseInt(element['count'])
                });
            }
        }
        r.obj = [];
    }
}


onMounted(() => {
    childRef.value?.refresh();
});

/* const handleCommand = async (command: string | number | object) => {
    
        exportExcel('Inventorygroup-table-cntrs');
    
}; */

const queryItems: Array<QueryItem> = pickQueryFromTable(tableColumns);
</script>
<style lang="scss" scoped>
.bg {
    margin-top: 10px;

    .btn {
        margin-right: 10px;
    }
}

.page {
    float: right;
    margin-top: 10px;
}
</style>
